<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function createNewElement() {
            var elementById = document.getElementById("city");
            var htmlliElement = document.createElement("li");
            htmlliElement.innerText = "武汉"
            htmlliElement.id = "wh"
            elementById.appendChild(htmlliElement);
        }

        function createNewElementOn() {
            var elementById = document.getElementById("city");
            var htmlliElement = document.createElement("li");
            htmlliElement.innerText = "武汉"
            htmlliElement.id = "wh"
            elementById.insertBefore(htmlliElement, document.getElementById("sh"))
        }

        function replaceElement() {
            var elementById = document.getElementById("city");
            var htmlliElement = document.createElement("li");
            htmlliElement.innerText = "武汉";
            htmlliElement.id = "wh";
            elementById.replaceChild(htmlliElement, document.getElementById("sh"))
        }

        function deleteElement() {
            var elementById = document.getElementById("bj");
            elementById.remove();
        }

        function clearElement() {
            var elementById = document.getElementById("city");
            elementById.innerHTML = "";
        }
    </script>
</head>
<!--
 1.在列表中增加元素
 2.在城市列表中的任意一个元素之前增加元素
 3.将城市列表中的一个元素替换为另一个元素
 4.在城市列表中删除任意一个元素
 5.清空城市列表
-->
<body>
<ul id="city">
    <li id="nmg">内蒙古</li>
    <li id="bj">北京</li>
    <li id="sz">深圳</li>
    <li id="sh">上海</li>
</ul>
<button onclick="createNewElement()">增加新城市</button>
<button onclick="createNewElementOn()">在上海前增加城市</button>
<button onclick="replaceElement()">替换城市</button>
<button onclick="deleteElement()">删除城市</button>
<button onclick="clearElement()">清空列表</button>
</body>
</html>